<!--
 * @Date: 2024-12-03 11:08:40
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-02-13 16:49:48
 * @Description: 代码编辑弹窗
-->
<template>
  <HpDialog
    v-model="dialogState.visiable"
    :title="title"
    :showFooter="showFooter"
    @close="handleClose"
    @confirm="handleConfirm"
  >
    <div class="code-dialog-body">
      <div class="switch-tool" v-show="!codeType">
        <div class="tool-label">数据类型:</div>
        <div class="tool-content">
          <el-radio-group v-model="dialogState.codeType">
            <el-radio
              v-for="typeItem in CodeStudioDataType.getTypes()"
              :key="typeItem.value"
              :label="typeItem.label"
              :value="typeItem.value"
            />
          </el-radio-group>
        </div>
      </div>
      <div class="code-studio-alert" v-show="isFuncType">
        <span class="alert-title">function {{ eventName }} ({{ eventParams.join(', ') }}) {</span>
      </div>
      <CodeStudio
        v-model="dialogState.content"
        :mode="codeStudioMode"
        :readOnly="readOnly"
      />
      <div class="code-studio-alert" v-show="isFuncType">
        <span class="alert-title">}</span>
      </div>
    </div>
  </HpDialog>
</template>

<script setup>
import { computed, reactive, watch } from 'vue';
import { CodeStudioDataType } from '@hp/config/pojo'

import { deepClone, isString } from '@hp/utils/data.js'
import { pluginManager } from '@hp/utils/pluginManager.js'

import HpDialog from './HpDialog.vue';

const CodeStudio = pluginManager.attrEditors['code-studio']

const emits = defineEmits([
  'confirm'
])

const props = defineProps({
  title: { type: String, default: '内容编辑' },
  readOnly: { type: Boolean, default: false },
  showFooter: { type: Boolean, default: true },
  codeType: { type: String, default: 'json' },
  eventName: { type: String, default: '' },
  eventParams: { type: Array, default: () => [] }
})

const dialogState = reactive({
  content: '',
  visiable: false,
  codeType: props.codeType
})
// 是否函数类型
const isFuncType = computed(() => {
  return CodeStudioDataType.FUNC.equals(dialogState.codeType)
})
const codeStudioMode = computed(() => {
  let type = props.codeType || dialogState.codeType
  let mode = CodeStudioDataType.getMode(type)
  return mode || props.codeType
})

/**
 * 加载编码类型
 */
const loadCodeType = () => {
  const { codeType } = props
  dialogState.codeType = codeType || 'json'
}

// 监听编码类型变化
watch(
  () => props.codeType,
  (nv) => {
    loadCodeType()
  }
)

const handleOpen = (value) => {
  let content = value ? deepClone(value) : ''
  if (isString(content) && content.startsWith('func:')) {
    content = content.replace('func:', '')
  }
  dialogState.content = content
  dialogState.visiable = true
}
const handleClose = () => {
  dialogState.content = ''
  dialogState.visiable = false
}
const handleConfirm = () => {
  let content = deepClone(dialogState.content)
  if (content && isFuncType.value) { content = `func:${content}` }
  emits('confirm', content)
  dialogState.content = ''
  dialogState.visiable = false
}

defineExpose({
  handleOpen
})


</script>

<style lang="scss" scoped>
.code-dialog-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.switch-tool {
  display: flex;
  align-items: center;
  .tool-label {
    margin-right: 10px;
  }
}
.code-studio-alert {
  color: #909399;
  padding: 6px 8px;
  background-color: #f4f4f5;
}
</style>